<template>
	<a-drawer
		title="账单"
		:width="960"
		v-model:visible="visible"
		unmountOnClose
		:footer="false"
	>
		<a-table
			class="cashBillTable"
			:columns="columns"
			:data="records" 
			:scroll="{
				x: '100%',
				y: '100%',
			}"
			:pagination="paginationProps"
			@page-change="handlePageChange"
			@page-size-change="handlePageSizeChange"
		>
			<template #status="{ record }">
				<a-badge v-if="record.status == 1" status="normal" text="已入账" />
				<a-badge v-if="record.status == 2" status="warning" text="未审核" />
				<a-badge v-if="record.status == 3" status="success" text="已通过" />
				<a-badge v-if="record.status == 4" status="danger" text="已拒绝" />
			</template>
		</a-table>
	</a-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { errors, capital } from '@/api';
import dateFormat from 'ourwill-feutil/common/dateFormat';
import { BILL_TRANSACTION_TYPES_FUN, USER_ACCOUNT_TYPES_FUN } from '@/constant'


const visible = ref(false)

const paginationProps = reactive({
	showTotal: true,
	showPageSize: true,
	pageSize: 10,
	current: 1,
	total: 0,
});
const params = reactive({
	userId: 0,
})
const records = ref([])
const columns: any = [
	{
		title: '提现/入账时间',
		width: 180,
		render(data: any) {
			return dateFormat(data.record.createTime)
		}
	},
	{
		title: '交易类型',
		width: 90,
		render(data: any) {
			return BILL_TRANSACTION_TYPES_FUN(data.record.type).text
		}
	},
	{
		title: '状态',
		width: 90,
		slotName: 'status',
	},
	{
		title: '提现/入账金额 (元)',
		width: 130,
		render(data: any) {
			return `${ BILL_TRANSACTION_TYPES_FUN(data.record.type).type }${(data.record.amount / 100).toFixed(2)}`
		}
	},
	{
		title: '服务费 (元)',
		width: 116,
		render(data: any) {
			let result = (data.record.serviceCharge / 100).toFixed(2)
			if(data.record.serviceChargeScale) {
				result += `（${data.record.serviceChargeScale}%）`
			}
			return result
		}
	},
	{
		title: '预计到账 (元)',
		width: 110,
		render(data: any) {
			return `${(data.record.actualAmount / 100).toFixed(2)}`
		}
	},
	{
		title: '到账账户',
		width: 200,
		render(data: any) {
			if(data.record.userAccountType) {
				return `${USER_ACCOUNT_TYPES_FUN(data.record.userAccountType)}（${data.record.heeBankUserName} / ${data.record.heeBankCardNum})`
			}
			return '-'
		}
	},
	{
		title: '到账时间',
		width: 160,
		render(data: any) {
			return data.record.receiptTime ? dateFormat(data.record.receiptTime) : '-'
		}
	},
	{
		title: '提现申请人',
		width: 180,
		render(data: any) {
			if(data.record.userName) {
				return `${data.record.userName}（${data.record.phone}）`
			} else {
				return '-'
			}
		}
	},
]
const reset = () => {
	paginationProps.pageSize = 10
	paginationProps.current = 1
	paginationProps.total = 0
	records.value = []
}

const show = async (id: number) => {
	params.userId = id
	reset()
	visible.value = true
	getList()
}

const getList = async () =>  {
	try {
		const { ok, data } = await capital.fundRecordBill({
			userId: params.userId,
			pageNum: paginationProps.current,
			pageSize: paginationProps.pageSize,
		})
		if (!ok) {
			return;
		}
		records.value = data.data.records
		paginationProps.total = data.data.total
	} catch (err) {
		errors(err);
	}
}

// 页码变化
const handlePageChange = async (page: number) => {
	paginationProps.current = page;
	await getList();
};
const handlePageSizeChange = async (pageSize: number) => {
	paginationProps.pageSize = pageSize;
	paginationProps.current = Math.min(Math.ceil(paginationProps.total / pageSize), paginationProps.current);
	await getList();
};
defineExpose({
	show,
})
</script>
<style lang="less">
.cashBillTable {
	
}
</style>